<template>
	<view class="content" :style="'background: linear-gradient('+theme.ba_color+' 2%, #fff 15%);'">
		<view class="wid100 dis disAl disJuC" style="height: 120rpx;">
			<view class="wid90 dis disAl borRad40 bacFFF" style="height: 72rpx;">
				<view class="dis disJuC" style="width: 13%;">
					<uni-icons type="search" size="30rpx" color="#AFB6B1"></uni-icons>
				</view>
				<input class="wid85 foSi25" v-model="sousuo" @input="sousuoInput" 
					placeholder="请输入门店名称" placeholder-style="color: #AFB6B1;"/>
			</view>
		</view>
		<scroll-view style="height: calc(100vh - 120rpx);" class="wid100" scroll-y="true" @scrolltolower="lower">
			<wsj v-if="list.length == 0" zs='0'></wsj>
			<view style="height: 1rpx;"></view>
			<block v-for="(item,index) in list" :key="index">
				<view class="wid90 mar bacFFF borRad20 mar-top30" style="padding: 32rpx 0;box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);" 
					@click="tiaozhuan('/pages/shop/particulars?id='+item.id)">
					<view class="wid90 mar dis disAl">
						<view  style="height: 142rpx;width: 27%;">
							<image :src="item.cover" style="width: 142rpx;" class="wh100 borRad10"></image>
						</view>
						<view style="width: 73%;">
							<view class="dis disAl">
								<view class="foSi30 fowe600">{{item.store_name}}</view>
								<view class="foSi15 mar-left20 yingye"
								:style="'color: '+theme.main_color+';border: 1rpx solid '+theme.main_color+';'">营业中</view>
							</view>
							<view class="dis disAl disJuB mar-top20">
								<view class="dis disAl">
									<image src="../../static/pingjia.png" style="width: 20rpx;height: 20rpx;"></image>
									<view class="foSi20 mar-right30" style="margin-left: 8rpx;color: #FFC300;">5.0</view>
									<image src="../../static/shijian.png" style="width: 20rpx;height: 20rpx;"></image>
									<view class="foSi20" style="margin-left: 8rpx;color: #878787;">{{item.start_time}}-{{item.end_time}}</view>
								</view>
								<view class="foSi20" :style="'color: '+theme.main_color+';'">{{item.service_num}}+次服务</view>
							</view>
							<view class="dis disAl disJuB" style="margin-top: 25rpx;">
								<view class="foSi15 dis disAl" :style="'color: '+theme.main_color+';background-color: '+theme.main_color+'21;'" 
									style="padding: 4rpx 8rpx;">
									<span class="mar-right10">好评率 {{item.positive_rate}}%</span>
									<span>接单率 {{item.order_rate}}%</span>
								</view>
								<view class="foSi20">{{item.km}}</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<view style="height: 100rpx;" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}"></view>
		</scroll-view>
		<tablist :back="theme.main_color" :datalist="datalist" :index="1"></tablist>
	</view>
</template>

<script>
	import tablist from "../common/tablist/tablist.vue"
	import wsj from '../common/w_sj.vue'
	export default {
		components: {
			tablist,wsj
		},
		data() {
			return {
				url: this.global.url,
				timer: null,
				sousuo: '',
				last_page: 0,
				page: 1,
				list: [],
				theme: null,
				datalist: [],
				paddingBottomHeight: 0
			}
		},
		created() {
			let that = this;
			uni.hideTabBar()
			uni.getSystemInfo({
				success: function (res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
		},
		onLoad() {
			var that = this;
			that.getList()
			that.datalist = uni.getStorageSync('bom')
			that.theme = uni.getStorageSync('theme')
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: that.theme.ba_color,//底部背景色
			})
		},
		methods: {
			sousuoInput: function(event) {
				var that = this
				if (that.timer !== null) clearTimeout(that.timer)
				that.timer = setTimeout(() => {
					that.sousuo = event.target.value
					that.list  = []
					that.page = 1
					that.getList()
					console.log(that.sousuo)
				}, 1000)
			},
			getList(){
				var that = this
				uni.showLoading({
					title:'加载中...'
				})
				uni.request({
					url: that.global.url+'api/qianyu_smfw/store/lists',
					method: 'POST',
					header:{'site-id':that.global.site_id},
					data: {
						// id: that.id,
						store_name:that.sousuo,
						page:that.page,
						lng: uni.getStorageSync('lon'),
						lat: uni.getStorageSync('lat')
					},
					success(res) {
					    let result = res.data
					    if(result.code == 1){
							// 有style的写法
							var data = result.data
							// console.log(data);
							if(that.page == 1){
								that.list = data.data
							}else{
								that.list = that.list.concat(data.data)
							}
					    }else{
					        uni.showToast({
					            title: result.msg,
					            icon:'none',
								duration: 2000
					        })
					    }
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			lower(e) {
				if(this.last_page > this.page){
					this.page++
					this.getList()
				}
			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
	}
	.yingye{
		padding: 5rpx 10rpx;
		border-radius: 5rpx;
	}
</style>
